<template>
	<view class="welcome">
		<swiper class="" :style="{height: '100vh'}" indicator-active-color="#ff6600" indicator-color="#8b8d8c" indicator-dots="true">
			<swiper-item class="page page-item01" v-for="(item, index) in swiperList" :key="item.id">
				<view class="page-top">
					<image :src="item.img"></image>
				</view>
				<view class="page-content">
					<view class="page-title">
						{{item.title}}
					</view>
					<view class="page-info">{{item.info}}</view>
					<view class="goWhere" v-if="index == swiperLenght">
						<navigator url="../home/index" class="goShop" open-type='switchTab'>去逛逛</navigator>
						<navigator :url="url" class="goApply">去入驻</navigator>
					</view>
				</view>
				
				<view class="page-footer">
					<view class="page-prev" v-if="index>0">上一页</view>
					<view class="page-next" v-if="index < swiperLenght">左滑进入下一页</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				swiperLenght:0,
				url:'pages/my/index',
				swiperList: [{
						id: 1,
						title: 'We Are',
						img: '../../static/welcome-weare.png',
						info: '实体门店数字化营销服务平台，立足实体门店收银环节，植入数字化营销功能。'
					},
					{
						id: 2,
						title: 'We Can',
						img: '../../static/welcome-wecan.png',
						info: '聚合收款、推广营销、客户引流、数字化营销'
					},
					{
						id: 3,
						title: 'We Do',
						img: '../../static/welcome-wedo.png',
						info: '付引商机，乐享生活'
					},
				]
			}
		},
		computed: {
			...mapState(['outPutUid']),
		},
		onLoad(params) {
			if (params.outPutUid && params.outPutUid != undefined) {
				// this.url = this.url + '?bind_uid=' + params.outPutUid;
				this.$store.commit('setOutPutUid', params.outPutUid);
			}
			this.swiperLenght = this.swiperList.length - 1;
		},
		onShow() {
			this.swiperLenght = this.swiperList.length - 1;
		},
		methods: {
		}
	}
</script>

<style lang="less">
	.welcome {
		height: 100vh;
		width: 100vw;
		background-color: #f5f6f8;
		font-weight: 'SimHei';
		font-size: 30rpx;
		.page-top {
			height: 50vh;
			background-color: #ff6600;
			image {
				width: 100vw;
				height: 50vh;
			}
		}
		.page-content {
			color: #000000;
			font-weight: 600;
			text-align: center;
			padding-top: 90rpx;
			.page-title{
				height: 120rpx;
				width: 500rpx;
				line-height: 120rpx;
				font-size: 45rpx;
				color: #333333;
				margin: 25rpx auto;
				border: 6rpx dashed;
				border-color: #ff6600;
			}
			.page-info{
				color: #8b8d8c;
				font-size: 30rpx;
				padding: 0 20rpx;
			}
			.goWhere{
				padding-top: 20rpx;
				text-align: center;
				navigator {
				    color: #ffffff;
				    background-color: #fe4755;
				    width: 200rpx;
				    padding: 15rpx 25rpx;
				    margin: 15rpx auto;
				    margin-bottom: 25rpx;
					border-radius: 15rpx;
				}
				.goShop{
					background-color: #54c3ff;
				}
			}
		}
		.page-footer{
			height: 50rpx;
			position: fixed;
			bottom: 50rpx;
			width: 100vw;
			view{
				display: inline-block;
				height: 50rpx;
			}
			.page-prev{
				float: left;
				margin-left: 50rpx;
			}
			.page-next{
				float: right;
				margin-right: 50rpx;
			}
		}
	}
</style>
